<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>发起工单</title>
    <link href="${pageContext.request.contextPath}/static/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/fonts.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/style2.css" rel="stylesheet">
</head>
<body>
<main class="ftdms-layout-content">
    <div class="container-fluid" style="margin-bottom:90px;padding: 0px">
        <div class="row" style="margin-top:15px;">
            <div class="col-lg-12">
                <div class="card">
                    <div class="tab-content">
                        <div class="tab-pane active">
                            <form id="orderForm" action="javaScript:;" enctype="multipart/form-data" name="edit-form" class="edit-form">
                                <div class="form-group">
                                    <label for="workOrder.title">工单标题</label>
                                    <input class="form-control" type="text" id="workOrder.title" name="title" value="" >
                                    <input type="hidden" name="userId" value="${userInfo.id}">
                                </div>
                                <div class="form-group">
                                    <label for="workOrder.content">工单描述</label>
                                    <textarea class="form-control" id="workOrder.content" rows="5" name="content" ></textarea>
                                </div>
                                <div class="form-group">
                                    <input class="form-control" type="file" value="选择附件" id="file" name="file">
                                </div>
                                <div class="form-group">
                                    <input type="submit" class="back btn btn-primary m-r-5" value="确认"></input>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<script src="${pageContext.request.contextPath}/static/js/jquery-1.11.0.js"></script>
<script src="${pageContext.request.contextPath}/static/layer/layer.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery.serializejson.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery.validate.min.js"></script>
<!--表单验证-->
<script>
    $("#orderForm").validate({
        rules:{
            title:{
                required:true,
                minlength:5
            },
            content:{
                required: true,
                minlength:10
            }
        },
        messages:{
            title:{
                required:"标题必须填写",
                minlength:"标题至少为5个字符"
            },
            content:{
                required: "内容必须填写",
                minlength:"内容至少为10个字符"
            }
        },
        submitHandler:function () {
            let formData = new FormData(document.getElementById("orderForm"));
            console.log(formData);
            $.ajax({
                url:"${pageContext.request.contextPath}/order/newOrder.handler",
                type:"post",
                data:formData,
                processData:false,
                contentType:false,
                success:function(data){
                    console.log(typeof data);
                    if(data.state){
                        layer.msg('上传成功', {icon: 1});
                        $("#orderForm")[0].reset();
                    }else {
                        layer.msg('上传失败', {icon: 2});
                    }
                }
            });
        }
    });
</script>
</body>
</html>
